"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Bluetooth, Wifi, CheckCircle, Loader2 } from "lucide-react"

interface BluetoothPageProps {
  onConnect: () => void
}

export function BluetoothPage({ onConnect }: BluetoothPageProps) {
  const [isScanning, setIsScanning] = useState(false)
  const [devices, setDevices] = useState<
    Array<{ id: string; name: string; rssi: number; status: "available" | "connecting" | "connected" }>
  >([])
  const [connectedCount, setConnectedCount] = useState(0)

  const mockDevices = [
    { id: "1", name: "ESP32-01", rssi: -45, status: "available" as const },
    { id: "2", name: "ESP32-02", rssi: -52, status: "available" as const },
    { id: "3", name: "ESP32-03", rssi: -38, status: "available" as const },
    { id: "4", name: "ESP32-04", rssi: -61, status: "available" as const },
  ]

  const startScan = () => {
    setIsScanning(true)
    setDevices([])

    setTimeout(() => setDevices([mockDevices[0]]), 500)
    setTimeout(() => setDevices([mockDevices[0], mockDevices[1]]), 1000)
    setTimeout(() => setDevices([mockDevices[0], mockDevices[1], mockDevices[2]]), 1500)
    setTimeout(() => {
      setDevices(mockDevices)
      setIsScanning(false)
    }, 2000)
  }

  const connectDevice = (deviceId: string) => {
    setDevices((prev) => prev.map((device) => (device.id === deviceId ? { ...device, status: "connecting" } : device)))

    setTimeout(() => {
      setDevices((prev) => prev.map((device) => (device.id === deviceId ? { ...device, status: "connected" } : device)))
      setConnectedCount((prev) => prev + 1)
    }, 2000)
  }

  return (
    <div className="min-h-screen bg-white p-8">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="border-b border-gray-200 pb-6 mb-12">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <div className="w-8 h-8 bg-orange-500 rounded"></div>
              <span className="text-sm font-medium">DEVICE CONNECTION</span>
            </div>
            <div className="text-sm text-gray-600">已连接: {connectedCount}/4 设备</div>
          </div>
        </div>

        {/* Main Content */}
        <div className="grid grid-cols-12 gap-8">
          {/* Left Section */}
          <div className="col-span-4">
            <h1 className="text-4xl font-bold text-black mb-8 tracking-tight">
              BLUETOOTH_
              <br />
              DEVICES
            </h1>

            <div className="border border-gray-200 p-6 mb-8">
              <div className="flex items-center justify-between mb-4">
                <span className="text-sm font-medium">连接状态</span>
                <div className="w-3 h-3 bg-orange-500 rounded-full"></div>
              </div>
              <div className="text-3xl font-bold text-black mb-2">{connectedCount}</div>
              <div className="text-sm text-gray-600">设备已连接</div>
              <div className="mt-4 bg-gray-100 h-2">
                <div
                  className="bg-orange-500 h-2 transition-all duration-500"
                  style={{ width: `${(connectedCount / 4) * 100}%` }}
                ></div>
              </div>
            </div>

            <Button
              onClick={startScan}
              disabled={isScanning}
              className="w-full h-12 bg-orange-500 hover:bg-orange-600 text-white font-medium rounded-none"
            >
              {isScanning ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  扫描中...
                </>
              ) : (
                <>
                  <Wifi className="w-4 h-4 mr-2" />
                  扫描设备
                </>
              )}
            </Button>
          </div>

          {/* Device Grid */}
          <div className="col-span-8">
            <div className="grid grid-cols-2 gap-6">
              {devices.map((device) => (
                <div key={device.id} className="border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center space-x-3">
                      <Bluetooth className="w-5 h-5 text-gray-600" />
                      <span className="font-medium">{device.name}</span>
                    </div>
                    {device.status === "connected" && <CheckCircle className="w-5 h-5 text-green-500" />}
                    {device.status === "connecting" && <Loader2 className="w-5 h-5 text-orange-500 animate-spin" />}
                  </div>

                  <div className="space-y-2 mb-4">
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-600">信号强度</span>
                      <span className="font-medium">{device.rssi} dBm</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-600">状态</span>
                      <span className="font-medium">
                        {device.status === "available" && "可连接"}
                        {device.status === "connecting" && "连接中"}
                        {device.status === "connected" && "已连接"}
                      </span>
                    </div>
                  </div>

                  {device.status === "available" && (
                    <Button
                      onClick={() => connectDevice(device.id)}
                      className="w-full h-10 bg-black hover:bg-gray-800 text-white font-medium rounded-none"
                    >
                      连接
                    </Button>
                  )}
                </div>
              ))}
            </div>

            {devices.length === 0 && !isScanning && (
              <div className="border border-gray-200 p-12 text-center">
                <Bluetooth className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                <p className="text-gray-600">未发现设备，请点击扫描</p>
              </div>
            )}
          </div>
        </div>

        {/* Bottom Action */}
        <div className="border-t border-gray-200 pt-8 mt-12">
          <div className="flex justify-end">
            <Button
              onClick={onConnect}
              disabled={connectedCount === 0}
              className="h-12 px-8 bg-orange-500 hover:bg-orange-600 disabled:bg-gray-300 text-white font-medium rounded-none"
            >
              {connectedCount > 0 ? "继续训练" : "请先连接设备"}
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}
